import React from 'react';
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import Setting from './setting';
import Add from './add';
import './style/';
import {Button,Icon,message,Alert,Carousel,Modal} from 'antd'
import {toJS} from 'mobx';
import {WeaTools, WeaDialog, WeaLocaleProvider,WeaNewScroll} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;
class Menu extends React.Component {

    state = {
        data :[],
        dataList:[],
        setting:{
            fontSize: 18,
            fontColor: '#ffffff',
            fontSize2: 16,
            fontColor2: '#000000',
            menusSizeType:1,
            menusWidth:100,
            menusHeight:200,
            menusSize:0,
            marginLR:20,
            marginTB:20,
            spaceingLR:20,
            spaceingTB:20,
            radius:5,
            isOpacityBgc:1,
            backGroundColor:'',

        },
        id:this.props.id,
        settingVisiable:false,
        addVisiable:false,
        currentParentId:0,
        setId:-1,
        scrollTop:0,
        ctrlHeight:200,
        scrollTop2:0,
        ctrlHeight2:200
    }



    setStateData = (data)=> {
        this.setState(data);
    }

    cancelAndReflush = ()=>{
        this.reflush()
        this.setState({settingVisiable:false})
    }

    save = (data)=>{
        const {id} = this.state
        if(!data.name){
            message.warning(getLabel(15859, '必要信息不完整！'));
            return
        }

        WeaTools.callApi('/api/portal/customSortMenu/save', 'POST', {"container":JSON.stringify({id:data.id,name:data.name,url:data.url,replaceData:JSON.stringify(data.replaceData),urlType:data.urlType,parentId:data.parentId,menuId:id,backGroundColor:data.backGroundColor,logo:data.logo,enable:data.enable,fontColor2:data.fontColor2})}).then((result) => {
            if (result.api_status == true) {
                this.reflush()
                this.setState({addVisiable:false})
                message.success(getLabel(83551, '保存成功！'), 3);
            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }

    updateSetting = ()=>{
        const {id,setting} = this.state
        WeaTools.callApi('/api/portal/customSortMenu/updateSetting', 'POST', {"container":JSON.stringify({id:id,setting:setting})}).then((result) => {
            if (result.api_status == true) {
                this.reflush()
                this.setState({settingVisiable:false})
                message.success(getLabel(83551, '保存成功！'), 3);
            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }

    delete = (ids)=>{
        Modal.confirm({
            title:getLabel(15172, '系统提示'),
            content:getLabel(385625, '确定要删除选择的记录吗？'),
            onOk: ()=>{
                WeaTools.callApi('/api/portal/customSortMenu/delete', 'POST', {"container":JSON.stringify({ids:ids})}).then((result) => {
                    if (result.api_status == true) {
                        this.reflush()
                        message.success(getLabel(83551, '保存成功！'), 3);
                    } else {
                        message.error(getLabel(84544, '保存失败！'), 3);
                    }
                });
            },
            onCancel(){}
        })

    }

    order = (data,orderType)=>{
        const {setting} = this.state
        WeaTools.callApi('/api/portal/customSortMenu/order', 'POST', {"container":JSON.stringify({id:data.id,parentId:data.parentId,orderIndex:data.orderIndex,orderType:orderType})}).then((result) => {
            if (result.api_status == true) {
                this.reflush()
                message.success(getLabel(83551, '保存成功！'), 3);
            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }

    componentWillMount(){
        this.reflush()
    }


   componentDidMount(){
       const {id,setting} = this.state
       let ctrlHeight = $("#lr_menu_container_"+id).height()
       this.setState({ctrlHeight:ctrlHeight})
       $(".lr_settingButtons_"+id).hide()
       $("#lr_menu_container_"+id).on("mouseleave",function(){
           $(".lr_settingButtons_"+id).hide()
       })
       $("#lr_menu_container_"+id).on("mouseenter",function(){
           $(".lr_settingButtons_"+id).show()
       })
       // this.setState({ctrlHeight2:setting.menusHeight})
   }

    reflush = ()=>{
        const {id,setting} = this.state
        WeaTools.callApi('/api/portal/customSortMenu/saveMenu', 'POST', {"container":JSON.stringify({"id":id,"setting":setting})}).then((result) => {
            if (result.api_status == true) {
                const data = result.data.menus
                const dataList = result.data.menusList
                const setting  = JSON.parse(result.data.settings.setting)
                const id = JSON.parse(result.data.settings.id)
                this.setState({data,dataList,setting,id})
            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }

    urlClick = (item)=>{
        let url = item.url
        if(item.urlType == 1){
            let json  = JSON.parse(item.replaceData)
            url = json[0].fullrouteurl
        }
        window.open(url)
    }

    render (){
        const {data,setting,id} = this.state
        let y = $("#lr_menu_container_"+id).width()
        let yh = $("#lr_menu_container_"+id).height()
        let x = parseInt((y-2*setting.marginLR+setting.spaceingLR)/(setting.menusWidth+setting.spaceingLR))
        let z = parseInt(data.length/x)*x
        if(z==data.length){
            z = (parseInt(data.length/x)-1)*x
        }


        let menusWidth = setting.menusWidth
        let menusHeight = setting.menusHeight
        if(setting.menusSizeType == 2){
            menusWidth = (y -2*setting.marginLR-(setting.menusSize-1)*setting.spaceingLR)/setting.menusSize
            menusHeight = yh-2*setting.marginTB
            x = setting.menusSize
            z = parseInt(data.length/x)*x
            if(z==data.length){
                z = (parseInt(data.length/x)-1)*x
            }
        }
        return (
                <div  style={{width:'100%',height:'100%',position:'relative','background-color':setting.isOpacityBgc==0?setting.backGroundColor:""}} id={"lr_menu_container_"+id} >
                    <WeaNewScroll
                        height={this.state.ctrlHeight}
                        onScroll={(e)=>{
                            this.setState({
                                scrollTop:e.target.scrollTop,
                            })
                        }}>
                        <div id={"lr_menu_"+id} style={{padding:setting.marginTB+"px "+setting.marginLR+"px"}}>
                            {

                                data.map((item,index)=>{
                                    let child = new Array()
                                    for(let i in item.child){
                                        child.push(item.child[i])
                                    }

                                    let j =  5-item.child.length
                                    for(let i = 0 ;i< j ;i++){
                                        child.push({
                                            id: -1,
                                            logo:"",
                                            backGroundColor:"",
                                            child:"",
                                            menuId:"",
                                            name:"",
                                            parentId:"",
                                            replaceData:"",
                                            url:"",
                                            urlType:""
                                        })
                                    }
                                    return(
                                                <div  style={{'vertical-align':'middle',display:'inline-block',width:menusWidth,height:menusHeight,'background-color':'white','border-radius':setting.radius,overflow:'hidden','margin-right':(index+1)%x==0?'0px':setting.spaceingLR+'px','margin-bottom':index>=z? '0px':setting.spaceingTB+"px"}}>

                                                    <div style={{'background-color':item.backGroundColor,height:menusHeight*1.5/11.5,position:'relative',cursor:'pointer'}} onClick={()=>{this.urlClick(item)}}><div style={{'overflow':'hidden','white-space':'nowrap','text-overflow':'ellipsis','letter-spacing':'1px','margin-left':'20px',height:menusHeight*1.5/11.5,'line-height':menusHeight*1.5/11.5,'font-size':setting.fontSize,'color':setting.fontColor}}><img  src={item.logo} style={{'vertical-align':'top',height:menusHeight*1.5/11.5,float:'right','margin-right':'20px'}}/>{item.name}</div></div>
                                                    <WeaNewScroll
                                                        height={menusHeight*10/11.5}
                                                        onScroll={(e)=>{
                                                            this.setState({
                                                                scrollTop:e.target.scrollTop2,
                                                            })
                                                        }}>
                                                        <div style={{width:menusWidth-40,margin:'0 20px'}}>
                                                            {
                                                                child.map((item,index)=>{
                                                                    if(item.id == -1){
                                                                        return <div style={{'letter-spacing':'1px','text-align':'center','font-size':setting.fontSize2,color:setting.fontColor2,'border-top':index!=0?'1px solid #e6e6e6':'0px',height:menusHeight*2/11.5,'line-height':menusHeight*2/11.5}} >{item.name}</div>
                                                                    }else if(item.enable==1){
                                                                        return <div title={item.name} style={{'letter-spacing':'1px','overflow':'hidden','white-space':'nowrap','text-overflow':'ellipsis','text-align':'center','font-size':setting.fontSize2,color:"gray",'border-top':index!=0?'1px solid #e6e6e6':'0px',height:menusHeight*2/11.5,'line-height':menusHeight*2/11.5}}>{item.name}</div>
                                                                    }
                                                                    return   <div title={item.name} style={{'letter-spacing':'1px','overflow':'hidden','white-space':'nowrap','text-overflow':'ellipsis',cursor:'pointer','text-align':'center','font-size':setting.fontSize2,color:item.fontColor2?item.fontColor2:setting.fontColor2,'border-top':index!=0?'1px solid #e6e6e6':'0px',height:menusHeight*2/11.5,'line-height':menusHeight*2/11.5}} onClick={()=>{this.urlClick(item)}}>{item.name}</div>
                                                                })
                                                            }
                                                        </div>
                                                    </WeaNewScroll>
                                                </div>
                                        )

                                })
                            }


                        </div>
                    </WeaNewScroll>
                    <Setting state={this.state} setStateData = {this.setStateData}  delete={this.delete} updateSetting={this.updateSetting} order={this.order} cancelAndReflush={this.cancelAndReflush}></Setting>
                    <Add state={this.state}  setStateData={this.setStateData} save={this.save}></Add>
                    {
                        this.props.isSetting == true
                            ?(
                                <div className={"lr_settingButtons_"+this.props.id +" lr_settingButtons_class"} >
                                    <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {this.setState({settingVisiable:true}) }}></span>
                                </div>
                            ):""
                    }
                </div>
        )
    }

}
export default Menu;